<html>
<head>
<title>Basic usage</title>
<link rel="stylesheet" href="../stylesheet/kendo.common.min.css">
<link rel="stylesheet" href="../stylesheet/kendo.default.min.css">
<link rel="stylesheet" href="../stylesheet/examples.css">
<link rel="stylesheet" href="../stylesheet/examples-offline.css">
</head>
<body>
	<a class="offline-button" href="../index.html">Back</a>
	<div id="example" class="k-content">
		<div id="clientsDb">
			<div id="grid" class="k-grid k-widget" style="height: 380px">
				<div class="k-grouping-header">Drag a column header and drop it here to group by that column</div>
				<div class="k-grid-header" style="padding-right: 17px;">
					<div class="k-grid-header-wrap">
						<table cellspacing="0">
							<colgroup>
								<col style="width: 90px;">
								<col style="width: 90px;">
								<col style="width: 100px;">
								<col>
								<col>
								<col style="width: 50px;">
							</colgroup>
							<thead>
								<tr>
									<th class="k-header"><a class="k-link" href="#">First
											Name</a></th>
									<th class="k-header"><a class=" k-link" href="#">Last
										Name</a></th>
									<th class="k-header"><a class="k-link" href="#">City</a></th>
									<th class="k-header"><a class="k-link" href="#">Title</a>
									</th>
									<th class="k-header"><a class="k-link" href="#">Birth
											Date</a></th>
									<th class="k-header"><a class="k-link" href="#">Age</a></th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
				<div class="k-grid-content" style="height: 287px;">
					<table class="k-focusable" cellspacing="0">
						<colgroup>
							<col style="width: 90px;">
							<col style="width: 90px;">
							<col style="width: 100px;">
							<col>
							<col>
							<col style="width: 50px;">
						</colgroup>
						<tbody>
							<tr>
								<td>Nige</td>
								<td>Davolio</td>
								<td>New York</td>
								<td>Chief Execute Officer</td>
								<td>30 August 1963</td>
								<td>49</td>
							</tr>
							<tr class="k-alt">
								<td>Robert</td>
								<td>Callahan</td>
								<td>Boston</td>
								<td>Sales Manager</td>
								<td>29 May 1960</td>
								<td>52</td>
							</tr>
							<tr>
								<td>Michael</td>
								<td>King</td>
								<td>New York</td>
								<td>Sales Manager</td>
								<td>19 September 1937</td>
								<td>75</td>
							</tr>
							<tr class="k-alt">
								<td>Nancy</td>
								<td>Dodsworth</td>
								<td>London</td>
								<td>Software Developer</td>
								<td>27 March 1966</td>
								<td>46</td>
							</tr>
							<tr>
								<td>Michael</td>
								<td>White</td>
								<td>New York</td>
								<td>Web Designer</td>
								<td>30 August 1963</td>
								<td>49</td>
							</tr>
							<tr class="k-alt">
								<td>Margaret</td>
								<td>King</td>
								<td>Seattle</td>
								<td>Vice President, Sales</td>
								<td>27 March 1966</td>
								<td>46</td>
							</tr>
							<tr>
								<td>Laura</td>
								<td>Peacock</td>
								<td>London</td>
								<td>Sales Manager</td>
								<td>09 January 1958</td>
								<td>54</td>
							</tr>
							<tr class="k-alt">
								<td>Michael</td>
								<td>Fuller</td>
								<td>Kirkland</td>
								<td>Accountant</td>
								<td>19 September 1937</td>
								<td>75</td>
							</tr>
							<tr>
								<td>Steven</td>
								<td>Fuller</td>
								<td>Boston</td>
								<td>Technical Support</td>
								<td>19 February 1952</td>
								<td>60</td>
							</tr>
							<tr class="k-alt">
								<td>Nige</td>
								<td>Suyama</td>
								<td>Philadelphia</td>
								<td>Sales Representative</td>
								<td>08 December 1948</td>
								<td>64</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="k-pager-wrap k-grid-pager">
					<a class="k-link k-state-disabled" title="Go to the first page"
						href="#"> <span class="k-icon k-i-seek-w">Go to the
							first page</span> </a> <a class="k-link k-state-disabled"
						title="Go to the previous page" href="#"> <span
						class="k-icon k-i-arrow-w">Go to the previous page</span> </a>
					<ul class="k-pager-numbers k-reset">
						<li><span class="k-state-selected">1</span></li>
						<li><a class="k-link" href="#">2</a></li>
						<li><a class="k-link" href="#">3</a></li>
						<li><a class="k-link" href="#">4</a></li>
						<li><a class="k-link" href="#">5</a></li>
					</ul>
					<a class="k-link" title="Go to the next page" href="#"> <span
						class="k-icon k-i-arrow-e">Go to the next page</span> </a> <a
						class="k-link" title="Go to the last page" href="#"> <span
						class="k-icon k-i-seek-e">Go to the last page</span> </a> <span
						class="k-pager-info k-label">1 - 10 of 50 items</span>
				</div>
			</div>
		</div>
	</div>
<style>
#clientsDb {
	width: 692px;
	height: 413px;
	margin: 30px auto;
	padding: 51px 4px 0 4px;
}
</style>
</body>
</html>